<template>
	<view class="home">
		<!-- 轮播图 -->
		<swiper indicator-dots circular>
			<swiper-item v-for="(item,index) in swiperList" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="hot_goods">
			<view class="tit">推荐商品</view>
			<goodsList :goods="goods"></goodsList>
		</view>
	</view>
</template>

<script>
	import goodsList from  '../../components/goods_list/goods_list'
	export default {
        components: {'goodsList': goodsList},
        data() {
			return {
				swiperList:[],
				goods:[],
				navs:[
					{
					    icon: 'iconfont icon-ziyuan',
						title: '黑马超市',
						path: '/pages/goods/goods'
					},
					{
                        icon: 'iconfont icon-guanyuwomen',
                        title: '联系我们',
                        path: '/pages/contact/contact'
					},
                    {
                        icon: 'iconfont icon-tupian',
                        title: '社区图片',
                        path: '/pages/pics/pics'
                    },
                    {
                        icon: 'iconfont icon-shipin',
                        title: '学习视频',
                        path: '/pages/videos/videos'
                    }
				]
			}
		},
		methods: {
			//获取轮播图数据
			async getSwipers(){
				const res = await this.$myRequest({
					url: '/api/getlunbo',
				})
				this.swiperList = res.data.message
			},
			//获取热门商品列表数据
			async getHotGoods(){
				const res = await this.$myRequest({
					url: '/api/getgoods?pageindex=1'
				})
				this.goods = res.data.message
			},
			//导航点击的处理函数
            navItemClick(path){
			    console.log(path)
				uni.navigateTo({
					url: path
				})
			}
		},
		onLoad() {
			this.getSwipers();
			this.getHotGoods();
		}
	}
</script>

<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
	}
	.nav{
		display: flex;
		.nav_item{
			width: 25%;
			text-align: center;
			view{
				width: 120rpx;
				height: 120rpx;
				background-color: $shop-color;
				border-radius: 60rpx;
				margin: 10rpx auto;
				line-height: 120rpx;
				color: #fff;
				font-size: 50rpx;
			}
			.icon-tupian{
				font-size: 45rpx;
			}
			text{
				font-size: 30rpx;
			}
		}
	}
	
	.hot_goods{
		background-color: #eee;
		overflow: hidden;
		margin: 10rpx;
		.tit{
			height: 50px;
			line-height: 50px;
			color: $shop-color;
			text-align: center;
			letter-spacing: 20px;
			background-color: #fff;
			margin: 7rpx auto;
		}
		.goods_list{
			padding: 0 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.goods_item{
				background-color: #fff;
				width: 340rpx;
				margin: 10rpx 0;
				padding: 15rpx 15rpx;
				box-sizing: border-box;
				image{
					width: 80%;
					height: 130px;
					display: block;
					margin: auto;
				}
			}
			.price{
				color: $shop-color;
				font-size: 36rpx;
				margin: 20rpx 0 10rpx 0;
				.decoration {
					color: #ccc;
					font-size: 28rpx;
					margin-left: 17rpx;
					text-decoration: line-through;
				}
			}
			.name {
				font-size: 28rpx;
				line-height: 50rpx;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
			}
		}
	}
</style>
